<template>
  <div class="hotel-qualification">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>酒店资质审核管理</span>
          <el-button-group>
            <el-button type="primary" @click="handleBatchAudit"
              >批量审核</el-button
            >
            <el-button type="success" @click="exportData">导出数据</el-button>
          </el-button-group>
        </div>
      </template>

      <!-- 搜索栏 -->
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="酒店名称">
          <el-input
            v-model="searchForm.hotelName"
            placeholder="请输入酒店名称"
          />
        </el-form-item>
        <el-form-item label="资质类型">
          <el-select
            v-model="searchForm.qualificationType"
            placeholder="请选择资质类型"
          >
            <el-option label="营业执照" value="business_license" />
            <el-option label="卫生许可" value="health_permit" />
            <el-option label="消防证书" value="fire_safety" />
            <el-option label="特种行业许可" value="special_permit" />
          </el-select>
        </el-form-item>
        <el-form-item label="审核状态">
          <el-select v-model="searchForm.status" placeholder="请选择审核状态">
            <el-option label="待审核" value="pending" />
            <el-option label="已通过" value="approved" />
            <el-option label="已驳回" value="rejected" />
            <el-option label="已过期" value="expired" />
          </el-select>
        </el-form-item>
        <el-form-item label="提交时间">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 数据表格 -->
      <el-table
        v-loading="loading"
        :data="sortedQualificationList"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        @sort-change="handleSortChange"
      >
        <template #empty>
          <div class="empty-state">
            <el-empty 
              description="暂无资质数据" 
              :image-size="200"
            >
              <div class="empty-text">还没有添加任何酒店资质</div>
              <div class="empty-subtext">添加酒店资质信息完善管理系统</div>
            </el-empty>
          </div>
        </template>
        <el-table-column type="selection" width="55" />
        <el-table-column
          prop="id"
          label="审核ID"
          width="100"
          sortable="custom"
        />
        <el-table-column
          prop="hotelName"
          label="酒店名称"
          min-width="180"
          sortable="custom"
        />
        <el-table-column prop="hotelType" label="酒店类型" width="120">
          <template #default="{ row }">
            <el-tag size="small">{{ getHotelTypeLabel(row.hotelType) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="qualificationType"
          label="资质类型"
          width="120"
          sortable="custom"
        >
          <template #default="{ row }">
            <el-tag>{{
              getQualificationTypeLabel(row.qualificationType)
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="submitTime"
          label="提交时间"
          width="160"
          sortable="custom"
        />
        <el-table-column
          prop="expiryDate"
          label="有效期至"
          width="160"
          sortable="custom"
        />
        <el-table-column
          prop="status"
          label="审核状态"
          width="100"
          sortable="custom"
        >
          <template #default="{ row }">
            <el-tag :type="getStatusTag(row.status)">
              {{ getStatusLabel(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button-group>
              <el-button
                v-if="row.status === 'pending'"
                type="primary"
                size="small"
                @click="handleAudit(row)"
              >
                审核
              </el-button>
              <el-button
                v-if="row.status === 'approved'"
                type="danger"
                size="small"
                @click="handleRevoke(row)"
              >
                吊销
              </el-button>
              <el-button
                v-if="row.status === 'revoked'"
                type="primary"
                size="small"
                @click="handleReaudit(row)"
              >
                重新审核
              </el-button>
              <el-button type="info" size="small" @click="viewDetail(row)">
                详情
              </el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 审核对话框 -->
    <el-dialog
      v-model="auditDialogVisible"
      title="资质审核"
      width="500px"
      class="qualification-dialog"
      :append-to-body="true"
      :lock-scroll="true"
      destroy-on-close
    >
      <el-scrollbar height="400px">
        <el-form
          ref="auditFormRef"
          :model="auditForm"
          :rules="auditRules"
          label-width="100px"
        >
          <el-form-item label="审核结果" prop="result" required>
            <el-radio-group v-model="auditForm.result">
              <el-radio label="approved">通过</el-radio>
              <el-radio label="rejected">驳回</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            v-if="auditForm.result === 'approved'"
            label="有效期至"
            prop="expiryDate"
            required
          >
            <el-date-picker
              v-model="auditForm.expiryDate"
              type="date"
              placeholder="选择有效期"
              :disabled-date="(time) => time.getTime() < Date.now()"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item label="审核说明" prop="comment">
            <el-input
              v-model="auditForm.comment"
              type="textarea"
              :rows="4"
              placeholder="请输入审核说明"
            />
          </el-form-item>
          <el-form-item label="通知酒店">
            <el-switch v-model="auditForm.notifyHotel" />
          </el-form-item>
        </el-form>
        <div class="qualification-preview">
          <h4>资质文件预览</h4>
          <el-image
            v-for="(url, index) in currentQualification.files"
            :key="index"
            :src="url"
            :preview-src-list="currentQualification.files"
            fit="contain"
            class="preview-image"
          />
        </div>
      </el-scrollbar>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="auditDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitAudit">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 详情对话框 -->
    <el-dialog v-model="detailDialogVisible" title="资质详情" width="800px">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="审核ID">{{
          currentQualification.id
        }}</el-descriptions-item>
        <el-descriptions-item label="酒店名称">{{
          currentQualification.hotelName
        }}</el-descriptions-item>
        <el-descriptions-item label="资质类型">
          <el-tag>{{
            getQualificationTypeLabel(currentQualification.qualificationType)
          }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="提交时间">{{
          currentQualification.submitTime
        }}</el-descriptions-item>
        <el-descriptions-item label="有效期至">{{
          currentQualification.expiryDate
        }}</el-descriptions-item>
        <el-descriptions-item label="审核状态">
          <el-tag :type="getStatusTag(currentQualification.status)">
            {{ getStatusLabel(currentQualification.status) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="资质说明" :span="2">
          {{ currentQualification.description }}
        </el-descriptions-item>
        <el-descriptions-item label="资质文件" :span="2">
          <div class="qualification-files">
            <el-image
              v-for="(url, index) in currentQualification.files"
              :key="index"
              :src="url"
              :preview-src-list="currentQualification.files"
              fit="contain"
              class="preview-image"
            />
          </div>
        </el-descriptions-item>
        <el-descriptions-item
          v-if="currentQualification.status !== 'pending'"
          label="审核信息"
          :span="2"
        >
          <div>审核人：{{ currentQualification.auditor }}</div>
          <div>审核时间：{{ currentQualification.auditTime }}</div>
          <div>审核说明：{{ currentQualification.auditComment }}</div>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import axios from "@/api/axios";
import * as XLSX from "xlsx";

// 搜索表单
const searchForm = reactive({
  hotelName: "",
  qualificationType: "",
  status: "",
  dateRange: [],
});

// 表格数据
const loading = ref(false);
const qualificationList = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const selectedQualifications = ref([]);
const sortConfig = reactive({
  prop: "",
  order: "",
});

// 审核对话框
const auditDialogVisible = ref(false);
const auditFormRef = ref(null);
const auditForm = reactive({
  result: "",
  expiryDate: "",
  comment: "",
  notifyHotel: true,
});

// 表单验证规则
const auditRules = {
  result: [{ required: true, message: "请选择审核结果", trigger: "change" }],
  expiryDate: [{ required: true, message: "请选择有效期", trigger: "change" }],
  comment: [{ required: true, message: "请输入审核说明", trigger: "blur" }],
};

// 详情对话框
const detailDialogVisible = ref(false);
const currentQualification = ref({});

// 测试数据
const mockQualifications = [
  {
    id: "Q202403010001",
    hotelName: "桂林大公馆酒店",
    hotelType: "luxury",
    qualificationType: "business_license",
    licenseNumber: "91450300MA5MX4XY2R",
    legalPerson: "张三",
    registeredAddress: "桂林市秀峰区甲山街道教育路10号",
    businessScope: "住宿服务；餐饮服务；会议服务；停车场服务",
    submitTime: "2024-03-01 09:00:00",
    expiryDate: "2029-03-01",
    status: "pending",
    description: "新开业酒店营业执照审核",
    files: ["/mock/license1.jpg", "/mock/license2.jpg"],
  },
  {
    id: "Q202403010002",
    hotelName: "桂林温馨家庭旅馆",
    hotelType: "economy",
    qualificationType: "health_permit",
    licenseNumber: "JY24503000123456",
    legalPerson: "李四",
    registeredAddress: "桂林市七星区七星路15号",
    businessScope: "住宿服务；简单餐饮服务",
    submitTime: "2024-03-01 10:30:00",
    expiryDate: "2025-03-01",
    status: "approved",
    description: "卫生许可证年审",
    files: ["/mock/health1.jpg"],
    auditor: "管理员A",
    auditTime: "2024-03-01 11:20:00",
    auditComment: "材料齐全，符合要求",
  },
  {
    id: "Q202403010003",
    hotelName: "桂林商务酒店",
    hotelType: "business",
    qualificationType: "fire_safety",
    licenseNumber: "XF450300202403001",
    legalPerson: "王五",
    registeredAddress: "桂林市象山区环城西一路8号",
    businessScope: "住宿服务；餐饮服务；商务中心",
    submitTime: "2024-03-01 14:00:00",
    expiryDate: "2024-09-01",
    status: "rejected",
    description: "消防安全检查",
    files: ["/mock/fire1.jpg", "/mock/fire2.jpg"],
    auditor: "管理员B",
    auditTime: "2024-03-01 15:30:00",
    auditComment: "消防设施不符合要求，需要整改",
  },
  {
    id: "Q202403010004",
    hotelName: "桂林度假山庄",
    hotelType: "resort",
    qualificationType: "special_permit",
    licenseNumber: "TE450300202403001",
    legalPerson: "赵六",
    registeredAddress: "桂林市雁山区雁山镇度假路1号",
    businessScope: "住宿服务；餐饮服务；休闲娱乐；温泉服务",
    submitTime: "2024-03-01 16:00:00",
    expiryDate: "2026-03-01",
    status: "expired",
    description: "特种行业许可证",
    files: ["/mock/special1.jpg"],
  },
];

// 获取酒店类型标签
const getHotelTypeLabel = (type) => {
  const types = {
    economy: "经济型",
    business: "商务型",
    luxury: "豪华型",
    resort: "度假型",
    boutique: "精品型",
  };
  return types[type] || type;
};

// 获取资质类型标签
const getQualificationTypeLabel = (type) => {
  const types = {
    business_license: "营业执照",
    health_permit: "卫生许可",
    fire_safety: "消防证书",
    special_permit: "特种行业许可",
  };
  return types[type] || type;
};

// 获取状态标签
const getStatusLabel = (status) => {
  const statuses = {
    pending: "待审核",
    approved: "已通过",
    rejected: "已驳回",
    expired: "已过期",
    revoked: "已吊销",
  };
  return statuses[status] || status;
};

// 获取状态标签样式
const getStatusTag = (status) => {
  const tags = {
    pending: "warning",
    approved: "success",
    rejected: "danger",
    expired: "info",
    revoked: "danger",
  };
  return tags[status] || "";
};

// 排序后的列表数据
const sortedQualificationList = computed(() => {
  const list = [...qualificationList.value];
  if (sortConfig.prop && sortConfig.order) {
    list.sort((a, b) => {
      let compareResult = 0;
      if (typeof a[sortConfig.prop] === "string") {
        compareResult = a[sortConfig.prop].localeCompare(b[sortConfig.prop]);
      } else {
        compareResult = a[sortConfig.prop] - b[sortConfig.prop];
      }
      return sortConfig.order === "ascending" ? compareResult : -compareResult;
    });
  }
  return list;
});

// 处理排序变化
const handleSortChange = ({ prop, order }) => {
  sortConfig.prop = prop;
  sortConfig.order = order;
};

// 获取资质审核列表
const fetchData = async () => {
  loading.value = true;
  try {
    // 调用API获取数据
    const params = {
      current: currentPage.value,
      size: pageSize.value,
      name: searchForm.hotelName || undefined,
      status: searchForm.status || undefined,
    };
    
    const result = await axios.get('/admin/hotels/qualifications', { params });
    
    if (result.code === 200 && result.data) {
      qualificationList.value = result.data.records || [];
      total.value = result.data.total || 0;
    } else {
      // 失败后使用模拟数据
      useFilteredMockData();
    }
  } catch (error) {
    console.error("获取资质列表失败：", error);
    // 失败后使用模拟数据
    useFilteredMockData();
  } finally {
    loading.value = false;
  }
};

// 使用过滤的模拟数据（后备方案）
const useFilteredMockData = () => {
  const mockData = [
    {
      id: 1,
      hotelId: 1,
      hotelName: "桂林大酒店",
      type: "营业执照",
      licenseNumber: "91450300MA5N2Y8B9X",
      validityPeriod: "2023-01-01至2028-01-01",
      issueAuthority: "桂林市市场监督管理局",
      status: "approved",
      reviewTime: "2023-02-15 14:30:00",
      reviewer: "管理员",
      comments: "资料齐全，符合要求",
      uploadTime: "2023-02-10 10:15:00",
      fileUrl: "https://example.com/licenses/hotel1.jpg",
    },
    {
      id: 2,
      hotelId: 2,
      hotelName: "桂林阳朔山水度假酒店",
      type: "卫生许可证",
      licenseNumber: "桂卫证字[2023]10045号",
      validityPeriod: "2023-03-01至2025-03-01",
      issueAuthority: "桂林市卫生健康委员会",
      status: "pending",
      reviewTime: null,
      reviewer: null,
      comments: null,
      uploadTime: "2023-03-05 16:20:00",
      fileUrl: "https://example.com/licenses/hotel2.jpg",
    },
    {
      id: 3,
      hotelId: 3,
      hotelName: "漓江假日酒店",
      type: "食品经营许可证",
      licenseNumber: "JY14503031523784",
      validityPeriod: "2022-11-15至2027-11-14",
      issueAuthority: "桂林市食品药品监督管理局",
      status: "rejected",
      reviewTime: "2023-01-20 09:45:00",
      reviewer: "管理员",
      comments: "材料不完整，请补充提交",
      uploadTime: "2023-01-15 11:30:00",
      fileUrl: "https://example.com/licenses/hotel3.jpg",
    },
    {
      id: 4,
      hotelId: 4,
      hotelName: "象山景区酒店",
      type: "特种行业许可证",
      licenseNumber: "桂公特字[2023]0058号",
      validityPeriod: "2023-04-01至2026-04-01",
      issueAuthority: "桂林市公安局",
      status: "approved",
      reviewTime: "2023-04-10 13:15:00",
      reviewer: "管理员",
      comments: "资料完整，审核通过",
      uploadTime: "2023-04-05 09:20:00",
      fileUrl: "https://example.com/licenses/hotel4.jpg",
    },
    {
      id: 5,
      hotelId: 5,
      hotelName: "七星公园酒店",
      type: "消防安全检查合格证",
      licenseNumber: "桂消检字[2023]A0112号",
      validityPeriod: "2023-02-15至2024-02-14",
      issueAuthority: "桂林市消防救援支队",
      status: "pending",
      reviewTime: null,
      reviewer: null,
      comments: null,
      uploadTime: "2023-02-20 14:50:00",
      fileUrl: "https://example.com/licenses/hotel5.jpg",
    },
  ];

  // 根据搜索条件过滤
  let filteredData = [...mockData];
  
  if (searchForm.hotelName) {
    const searchName = searchForm.hotelName.toLowerCase();
    filteredData = filteredData.filter(
      item => item.hotelName.toLowerCase().includes(searchName)
    );
  }
  
  if (searchForm.status) {
    filteredData = filteredData.filter(
      item => item.status === searchForm.status
    );
  }
  
  // 计算分页
  total.value = filteredData.length;
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  qualificationList.value = filteredData.slice(start, end);
};

// 初始化数据
onMounted(() => {
  fetchData();
});

// 搜索
const handleSearch = () => {
  currentPage.value = 1;
  fetchData();
};

// 重置搜索
const resetSearch = () => {
  Object.keys(searchForm).forEach((key) => {
    searchForm[key] = "";
  });
  handleSearch();
};

// 处理选择变化
const handleSelectionChange = (val) => {
  selectedQualifications.value = val;
};

// 查看详情
const viewDetail = (row) => {
  currentQualification.value = JSON.parse(JSON.stringify(row));
  detailDialogVisible.value = true;
};

// 审核资质
const handleAudit = (row) => {
  currentQualification.value = JSON.parse(JSON.stringify(row));
  auditForm.result = "approved";
  auditForm.expiryDate = "";
  auditForm.comment = "";
  auditForm.notifyHotel = true;
  auditDialogVisible.value = true;
};

// 提交审核
const submitAudit = async () => {
  auditFormRef.value.validate(async (valid) => {
    if (!valid) return;
    
    try {
      const params = {
        id: currentQualification.value.id,
        status: auditForm.result,
        comments: auditForm.comment,
        expiryDate: auditForm.result === "approved" ? auditForm.expiryDate : null,
        notifyHotel: auditForm.notifyHotel
      };
      
      const result = await axios.put('/admin/hotels/qualifications/audit', params);
      
      if (result.code === 200) {
        ElMessage.success("审核操作成功");
        auditDialogVisible.value = false;
        fetchData();
      } else {
        ElMessage.error(result.message || "审核操作失败");
      }
    } catch (error) {
      console.error("审核操作失败：", error);
      ElMessage.error("审核操作失败");
    }
  });
};

// 处理吊销
const handleRevoke = async (row) => {
  try {
    await ElMessageBox.confirm("确定要吊销该资质吗？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    });
    
    try {
      const res = await axios.post(`/admin/hotels/qualifications/${row.id}/revoke`);
      
      if (res.code === 200) {
        ElMessage.success("吊销成功");
        fetchData();
      } else {
        // 模拟吊销成功
        const qualification = qualificationList.value.find(
          (item) => item.id === row.id,
        );
        
        if (qualification) {
          qualification.status = "revoked";
          qualification.revokeTime = new Date().toLocaleString();
          qualification.revokeBy = "当前管理员";
          ElMessage.success("吊销成功（使用模拟数据）");
        }
      }
    } catch (error) {
      console.error("吊销失败：", error);
      ElMessage.error("吊销失败，使用模拟数据");
      
      // 模拟吊销成功
      const qualification = qualificationList.value.find(
        (item) => item.id === row.id,
      );
      
      if (qualification) {
        qualification.status = "revoked";
        qualification.revokeTime = new Date().toLocaleString();
        qualification.revokeBy = "当前管理员";
        ElMessage.success("吊销成功（使用模拟数据）");
      }
    }
  } catch (error) {
    // 用户取消操作
    ElMessage.info("已取消吊销");
  }
};

// 处理重新审核
const handleReaudit = (row) => {
  currentQualification.value = row;
  auditForm.result = "";
  auditForm.expiryDate = "";
  auditForm.comment = "";
  auditForm.notifyHotel = true;

  row.reauditTime = new Date().toLocaleString();
  row.reauditBy = "当前管理员";
  auditDialogVisible.value = true;
};

// 导出Excel
const exportToExcel = () => {
  // 指定导出的列
  const header = {
    id: 'ID',
    hotelName: '酒店名称',
    type: '资质类型',
    licenseNumber: '证件号码',
    validityPeriod: '有效期',
    issueAuthority: '发证机关',
    status: '状态',
    uploadTime: '上传时间',
    reviewTime: '审核时间',
    reviewer: '审核人',
    comments: '审核意见'
  };
  
  // 转换状态值
  const data = qualificationList.value.map(item => {
    const newItem = { ...item };
    
    // 转换状态显示
    if (newItem.status === 'pending') {
      newItem.status = '待审核';
    } else if (newItem.status === 'approved') {
      newItem.status = '已通过';
    } else if (newItem.status === 'rejected') {
      newItem.status = '已拒绝';
    }
    
    return newItem;
  });
  
  // 导出Excel
  const worksheet = XLSX.utils.json_to_sheet(data, { header: Object.keys(header) });
  
  // 设置表头
  XLSX.utils.sheet_add_aoa(worksheet, [Object.values(header)], { origin: 'A1' });
  
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, '酒店资质审核列表');
  
  // 保存Excel文件
  XLSX.writeFile(workbook, `酒店资质审核列表_${new Date().toLocaleDateString()}.xlsx`);
};

// 批量审核
const handleBatchAudit = async () => {
  if (selectedQualifications.value.length === 0) {
    ElMessage.warning("请选择要审核的资质");
    return;
  }

  try {
    await ElMessageBox.confirm(
      `确定要批量审核选中的 ${selectedQualifications.value.length} 条资质吗？`,
      "批量审核",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }
    );
    
    const ids = selectedQualifications.value.map(item => item.id);
    
    try {
      const res = await axios.post("/admin/hotels/qualifications/batch-audit", { ids });
      
      if (res.code === 200) {
        ElMessage.success("批量审核已开始");
        fetchData();
      } else {
        // 模拟批量审核
        selectedQualifications.value.forEach((qualification) => {
          const item = qualificationList.value.find(
            (item) => item.id === qualification.id,
          );
          if (item && item.status === "pending") {
            item.status = "processing";
          }
        });
        ElMessage.success("批量审核已开始（使用模拟数据）");
      }
    } catch (error) {
      console.error("批量审核失败：", error);
      ElMessage.error("批量审核失败，使用模拟数据");
      
      // 模拟批量审核
      selectedQualifications.value.forEach((qualification) => {
        const item = qualificationList.value.find(
          (item) => item.id === qualification.id,
        );
        if (item && item.status === "pending") {
          item.status = "processing";
        }
      });
      ElMessage.success("批量审核已开始（使用模拟数据）");
    }
  } catch (error) {
    // 用户取消操作
    ElMessage.info("已取消批量审核");
  }
};

// 分页相关方法
const handleSizeChange = (val) => {
  pageSize.value = val;
  fetchData();
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
  fetchData();
};
</script>

<style scoped>
.hotel-qualification {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-form {
  margin-bottom: 20px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.qualification-preview {
  margin-top: 20px;
  border-top: 1px solid #eee;
  padding-top: 20px;
}

.preview-image {
  width: 200px;
  height: 200px;
  margin-right: 10px;
  margin-bottom: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.qualification-files {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.qualification-dialog {
  /* Add your styles here */
}

.empty-state {
  padding: 40px 0;
}

.empty-text {
  font-size: 16px;
  color: var(--el-text-color-secondary);
  margin-top: 10px;
}

.empty-subtext {
  font-size: 14px;
  color: var(--el-text-color-placeholder);
  margin-top: 5px;
}

.mt-4 {
  margin-top: 16px;
}
</style>
